* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #ccc;
}

.bear {
    position: fixed;
    top: 85%;
    width: 200px;
    height: 100px;
    background: url(img/bear.png) no-repeat;
    animation: run 1s steps(8) 0s infinite, move 3s linear forwards;
}

@keyframes run {
    0% {
        background-position: 0;
    }

    100% {
        background-position: -1600px;

    }
}

@keyframes move {
    0% {
        left: 0;
    }

    100% {
        left: 50%;
        transform: translateX(-50%);
    }
}

.bg1 {
    position: fixed;
    bottom: 0px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 300px;
    background: url(img/bg1.png) no-repeat;
    background-size: 3840px 300px;
    animation: bg1_move 48s steps(1000) infinite;
}

@keyframes bg1_move {
    0% {
        background-position: 0;
    }

    100% {
        background-position: -1834px;

    }
}

.bg2 {
    position: fixed;
    bottom: 0px;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 400px;
    background: url(img/bg2.png) no-repeat;
    background-size: 3840px 400px;
    animation: bg1_move 88s steps(1000) infinite;
}